<template>
  <view class="planning-container">
    <view class="planning-header">
      <view class="title">{{ planData.planName || '行程规划' }}</view>
      <view class="actions">
        <button class="btn edit-btn" @click="toggleEditMode">
          <text class="icon">{{ isEditing ? '💾' : '✏️' }}</text>
          <text>{{ isEditing ? '保存' : '编辑' }}</text>
        </button>
        <button v-if="planId" class="btn delete-btn" @click="confirmDelete">
          <text class="icon">🗑️</text>
          <text>删除</text>
        </button>
      </view>
    </view>
    
    <view class="planning-content">
      <view v-if="loading" class="loading">
        <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
      </view>
      
      <view v-else-if="error" class="error-message">
        <text class="error-icon">⚠️</text>
        <text class="error-text">{{ error }}</text>
        <button class="retry-btn" @click="loadPlanData">重试</button>
      </view>
      
      <view v-else>
        <!-- 编辑模式 -->
        <view v-if="isEditing" class="edit-form">
          <view class="form-item">
            <text class="label">行程名称</text>
            <input type="text" v-model="editForm.planName" class="input" placeholder="请输入行程名称" />
          </view>
          
          <view class="form-item">
            <text class="label">行程内容</text>
            <textarea 
              v-model="editForm.travelPlan" 
              class="textarea" 
              placeholder="请输入行程详情" 
              maxlength="-1"
              :auto-height="true"
            ></textarea>
          </view>
          
          <view class="form-actions">
            <button class="btn save-btn" @click="savePlan">
              <text class="icon">💾</text>
              <text>保存</text>
            </button>
            <button class="btn cancel-btn" @click="cancelEdit">
              <text class="icon">✖️</text>
              <text>取消</text>
            </button>
          </view>
        </view>
        
        <!-- 查看模式 -->
        <view v-else class="plan-details">
          <view class="section plan-section">
            <view class="section-header">
              <text class="section-title">行程安排</text>
              <text class="section-subtitle">{{ formatDate(planData.createTime).split(' ')[0] }}</text>
            </view>
            <rich-text class="plan-content" :nodes="formattedPlanContent"></rich-text>
          </view>
          
          <view class="section info-section">
            <view class="section-header">
              <text class="section-title">行程信息</text>
            </view>
            <view class="info-list">
              <view class="info-item">
                <text class="label">创建时间</text>
                <text class="value">{{ formatDate(planData.createTime) }}</text>
              </view>
              <view class="info-item">
                <text class="label">更新时间</text>
                <text class="value">{{ formatDate(planData.updateTime) }}</text>
              </view>
            </view>
          </view>
          
          <!-- 添加操作按钮区域 -->
          <view class="action-section">
            <button class="action-btn generate-map-btn" @click="generateMap">
              <text class="icon">🗺️</text>
              <text class="text">生成路线图</text>
            </button>
            <button class="action-btn share-btn" @click="sharePlan">
              <text class="icon">📤</text>
              <text class="text">分享行程</text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTravelPlanDetail, updateTravelPlan, deleteTravelPlan, createTravelPlan } from '@/api/plan';
import { sharePlan, cancelSharePlan } from '@/api/share';
import { getAiResponse } from '@/api/ai';
import {createRouteData,updateRouteData,getPlanRouteData,deleteRouteData} from '@/api/travelrouterdata'
export default {
  data() {
    return {
      planId: null,
      userId: null,
      planData: {},
      loading: false,
      error: '',
      isEditing: false,
      editForm: {
        planName: '',
        travelPlan: '',
        userId: ''
      },
      loadingText: {
        contentdown: '正在加载...',
        contentrefresh: '加载中...',
        contentnomore: '没有更多数据了'
      }
    }
  },
  computed: {
    formattedPlanContent() {
      if (!this.planData.travelPlan) return '';
      
      // 首先去除所有**符号，然后进行格式化
      return this.planData.travelPlan
        .replace(/\*\*/g, '') // 移除所有**符号
        .replace(/\n/g, '<br>')
        .replace(/第(\d+)天[：:]/g, '<div style="font-size: 32rpx; font-weight: bold; color: #333; margin: 20rpx 0 10rpx; padding: 10rpx; background-color: #f5f7fa; border-radius: 8rpx;">第$1天：</div>')
        .replace(/([上中下晚]午|早晨|傍晚|晚上)[：:]/g, '<div style="color: #2196F3; font-weight: 500; margin: 10rpx 0;">$1：</div>') // 添加时间段的样式
        .replace(/(\d{1,2}[:：]\d{2}[-~～至]?\d{0,2}[:：]?\d{0,2})/g, '<span style="color: #2196F3; font-weight: 500;">$1</span>')
        .replace(/【([^】]+)】/g, '<span style="color: #4CAF50; font-weight: 500;">【$1】</span>');
    }
  },
  onLoad(options) {
    // 获取当前登录用户ID
    const userInfo = uni.getStorageSync('userInfo');
    this.userId = userInfo ? userInfo.id : null;
    
    if (!this.userId) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }, 1500);
      return;
    }
    
    if (options.id) {
      this.planId = options.id;
      // 加载行程规划数据
      this.loadPlanData();
    } else {
      // 新建行程
      this.isEditing = true;
      this.editForm.userId = this.userId;
    }
  },
  methods: {
    async loadPlanData() {
      if (!this.planId || !this.userId) return;
      
      this.loading = true;
      this.error = '';
      
      try {
        const response = await getTravelPlanDetail(this.planId, this.userId);
        
        if (response.code === 200 && response.data) {
          this.planData = response.data;
          // 初始化编辑表单
          this.editForm = {
            planName: this.planData.planName,
            travelPlan: this.planData.travelPlan,
            userId: this.userId
          };
        } else {
          this.error = response.message || '获取行程数据失败';
        }
      } catch (error) {
        console.error('加载行程数据出错:', error);
        this.error = '网络错误，请稍后重试';
      } finally {
        this.loading = false;
      }
    },
    
    toggleEditMode() {
      if (this.isEditing) {
        // 如果当前是编辑模式，点击为保存
        this.savePlan();
      } else {
        // 进入编辑模式
        this.isEditing = true;
      }
    },
    
    async savePlan() {
      if (!this.editForm.planName.trim()) {
        uni.showToast({
          title: '请输入行程名称',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      
      try {
        let response;
        if (this.planId) {
          // 更新已有行程
          response = await updateTravelPlan(this.planId, this.editForm);
        } else {
          // 创建新行程
          response = await createTravelPlan(this.editForm);
        }
        
        if (response.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          
          // 更新数据并退出编辑模式
          this.planData = response.data;
          this.planId = response.data.id; // 保存新创建的行程ID
          this.isEditing = false;
          
          // 如果是新建行程，跳转到详情页
          if (!this.planId) {
            setTimeout(() => {
              uni.redirectTo({
                url: `/package-itinerary/pages/planning?id=${response.data.id}`
              });
            }, 1500);
          }
        } else {
          uni.showToast({
            title: response.message || '保存失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('保存行程数据出错:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    cancelEdit() {
      // 取消编辑，恢复原数据
      this.editForm = {
        planName: this.planData.planName,
        travelPlan: this.planData.travelPlan,
        userId: this.userId
      };
      this.isEditing = false;
    },
    
    confirmDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除此行程规划吗？此操作无法撤销。',
        confirmColor: '#ff0000',
        success: (res) => {
          if (res.confirm) {
            this.deletePlan();
          }
        }
      });
    },
    
    async deletePlan() {
      this.loading = true;
      
      try {
        const response = await deleteTravelPlan(this.planId, this.userId);
        
        if (response.code === 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: response.message || '删除失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('删除行程数据出错:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    // 生成路线图
    async generateMap() {
      // 显示生成中动画
      uni.showLoading({
        title: '路线生成中...',
        mask: true
      });

      try {
        // 检查该行程是否已有路线数据
        const existingRouteData = await getPlanRouteData(this.planId);
        
        // 如果已有路线数据，提示用户是否使用
        if (existingRouteData.code === 200 && existingRouteData.data && existingRouteData.data.length > 0) {
          uni.hideLoading(); // 隐藏加载提示
          
          uni.showModal({
            title: '提示',
            content: '该行程已存在路线数据，是否使用已有路线？',
            confirmText: '使用',
            cancelText: '重新生成',
            success: async (res) => {
              if (res.confirm) {
                // 用户选择使用已有路线数据
                try {
                  // 将路线数据存入本地
                  const routeData = existingRouteData.data[0]; // 使用最新的一条
                  uni.setStorageSync('travelRouteData', JSON.stringify({
                    id: routeData.id,
                    city: routeData.city,
                    title: routeData.title,
                    dateRange: routeData.dateRange,
                    attractions: routeData.attractions,
                    timestamp: new Date().getTime(),
                    travelPlanId: this.planId,
                    isExistingRoute: true
                  }));
                  
                  // 跳转到路线规划页面
                  uni.navigateTo({
                    url: '/package-discovery/pages/AI-travel'
                  });
                } catch (e) {
                  console.error('保存路线数据失败:', e);
                  uni.showToast({
                    title: '数据处理失败',
                    icon: 'none'
                  });
                }
              } else {
                // 用户选择重新生成路线，继续原有流程
                await this.processNewRouteGeneration();
              }
            }
          });
        } else {
          // 没有已有路线数据，直接生成新路线
          await this.processNewRouteGeneration();
        }
      } catch (error) {
        console.error('检查路线数据失败:', error);
        // 出错时继续原流程
        await this.processNewRouteGeneration();
      }
    },
    
    // 处理新路线生成的逻辑
    async processNewRouteGeneration() {
      uni.showLoading({
        title: '路线生成中...',
        mask: true
      });
      
      const message = this.planData.travelPlan + '根据上述信息帮我提取景点名称,按照：景点具体省市县+景点名称形式返回，不能省略加号';
      const aidata = await getAiResponse(message);
      
      // 隐藏加载动画
      uni.hideLoading();
      
      if (!aidata.success || !aidata.data) {
        uni.showToast({
          title: '提取景点失败',
          icon: 'none'
        });
        return;
      }
      
      // 解析AI返回的景点数据 - 增强版
      let attractions = [];
      
      // 尝试解析带有明确日期分组的格式（例如：### 第一天：西湖及周边景点）
      const dayGroups = aidata.data.match(/###\s*第[一二三四五六七八九十\d]+天[：:].+?(?=###|$)/gs);
      
      if (dayGroups && dayGroups.length > 0) {
        // 按天分组解析
        dayGroups.forEach(dayGroup => {
          const dayMatch = dayGroup.match(/###\s*第([一二三四五六七八九十\d]+)天[：:](.+)/);
          if (dayMatch) {
            const dayNum = dayMatch[1];
            const dayTitle = `第${dayNum}天`;
            const dayDesc = dayMatch[2] ? dayMatch[2].trim() : '';
            
            // 从每天的内容中提取景点
            const spots = dayGroup.match(/[-•]\s*([^\n]+)/g);
            if (spots && spots.length > 0) {
              spots.forEach(spot => {
                const spotName = spot.replace(/^[-•]\s*/, '').trim();
                if (spotName && spotName.length > 1) {
                  attractions.push({
                    name: spotName,
                    description: '景点',
                    dayTitle: dayTitle,
                    dayDesc: dayDesc
                  });
                } 
              });
            }
          }
        });
      }
      
      // 如果没有找到带日期的分组，尝试其他格式
      if (attractions.length === 0) {
        // 尝试匹配数字编号格式（例如：1. 进贤县博物馆）
        const numberedItems = aidata.data.match(/\d+\.\s*([^\n]+)/g);
        if (numberedItems && numberedItems.length > 0) {
          attractions = numberedItems.map(item => ({
            name: item.replace(/^\d+\.\s*/, '').trim(),
            description: '景点'
          }));
        } else {
          // 尝试匹配破折号或圆点格式（例如：- 西湖）
          const bulletItems = aidata.data.split('\n')
            .filter(line => line.trim() && (line.startsWith('-') || line.startsWith('•')))
            .map(line => ({
              name: line.replace(/^[-•]\s*/, '').trim(),
              description: '景点'
            }));
            
          if (bulletItems.length > 0) {
            attractions = bulletItems;
          }
        }
      }
      
      // 如果还是没有提取到景点，尝试基本行分析
      if (attractions.length === 0) {
        const lines = aidata.data.split('\n');
        for (const line of lines) {
          const trimmedLine = line.trim();
          if (trimmedLine && 
              trimmedLine.length > 2 && 
              !trimmedLine.includes('景点名称') && 
              !trimmedLine.includes('以下是') && 
              !trimmedLine.includes('提取') &&
              trimmedLine.length < 30) {
            attractions.push({
              name: trimmedLine,
              description: '景点'
            });
          }
        }
      }
      
      if (attractions.length === 0) {
        uni.showToast({
          title: '未找到景点信息',
          icon: 'none'
        });
        return;
      }
      
      console.log('提取到的景点:', attractions);
      
      // 从行程内容中提取城市名称
      let city = '';
      const cityMatch = this.planData.planName.match(/([^市县区]+)[市县区]/);
      if (cityMatch) {
        city = cityMatch[1];
      } else {
        // 如果标题中没有找到城市名，尝试从内容中提取
        const contentCityMatch = this.planData.travelPlan.match(/([^市县区]+)[市县区]/);
        if (contentCityMatch) {
          city = contentCityMatch[1];
        }
      }
      
      // 如果都没找到，使用默认值
      if (!city) {
        city = '杭州';
      }
      
      // 构建新的旅行数据，不使用缓存数据
      const travelData = {
        city: city,
        title: this.planData.planName,
        dateRange: this.extractDateRange() || '暂无日期',
        attractions: attractions,
        timestamp: new Date().getTime(),
        travelPlanId: this.planId, // 添加行程ID
        isExistingRoute: false     // 标记为新路线
      };
      
      try {
        uni.setStorageSync('travelRouteData', JSON.stringify(travelData));
        uni.navigateTo({
          url: '/package-discovery/pages/AI-travel'
        });
      } catch (e) {
        console.error('保存数据失败:', e);
        uni.showToast({
          title: '数据处理失败',
          icon: 'none'
        });
      }
    },
    
    // 从行程名称或内容中提取日期范围
    extractDateRange() {
      // 先尝试从行程名称中提取日期范围
      let dateRange = '';      
      // 匹配常见的日期范围格式：YYYY/MM/DD-YYYY/MM/DD, YYYY.MM.DD-YYYY.MM.DD, MM月DD日-MM月DD日
      const patterns = [
        /(\d{4}[\/\.]\d{1,2}[\/\.]\d{1,2})\s*[-~至到]\s*(\d{4}[\/\.]\d{1,2}[\/\.]\d{1,2})/,
        /(\d{4}[\/\.]\d{1,2}[\/\.]\d{1,2})\s*[-~至到]\s*(\d{1,2}[\/\.]\d{1,2})/,
        /(\d{1,2}月\d{1,2}日?)\s*[-~至到]\s*(\d{1,2}月\d{1,2}日?)/];      
      // 先从行程名称中查找
      for (const pattern of patterns) {
        const match = this.planData.planName.match(pattern);
        if (match) {
          dateRange = `${match[1]}至${match[2]}`;
          break;
        }
      }
      
      // 如果行程名称中没有找到，尝试从内容中提取
      if (!dateRange) {
        const content = this.planData.travelPlan;
        for (const pattern of patterns) {
          const match = content.match(pattern);
          if (match) {
            dateRange = `${match[1]}至${match[2]}`;
            break;
          }
        }
      }
      
      return dateRange;
    },
    
    // 分享行程
    async sharePlan() {
      if (!this.planId) {
        uni.showToast({
          title: '请先保存行程',
          icon: 'none'
        });
        return;
      }
      
      try {
        const res = await sharePlan(this.planId);
        
        if (res.code === 200) {
          // 获取分享码
          const shareCode = res.data.shareCode;
          const shareUrl = `/package-itinerary/pages/planning?shareCode=${shareCode}`;
          
          uni.showModal({
            title: '分享成功',
            content: '行程分享链接已生成，是否复制链接或打开分享菜单？',
            confirmText: '分享',
            cancelText: '复制',
            success: (res) => {
              if (res.confirm) {
                // 打开系统分享菜单
                uni.share({
                  provider: 'weixin',
                  scene: 'WXSceneSession',
                  type: 0,
                  title: `${this.planData.planName} - 旅行行程`,
                  summary: `共${this.getDayCount()}天的精彩行程，快来看看吧！`,
                  imageUrl: this.planData.coverImage || '',
                  href: shareUrl,
                  success: function (res) {
                    console.log('分享成功：', res);
                  },
                  fail: function (err) {
                    console.log('分享失败：', err);
                    uni.showToast({
                      title: '分享失败',
                      icon: 'none'
                    });
                  }
                });
              } else if (res.cancel) {
                // 复制链接
                uni.setClipboardData({
                  data: shareUrl,
                  success: () => {
                    uni.showToast({
                      title: '链接已复制',
                      icon: 'success'
                    });
                  }
                });
              }
            }
          });
        } else {
          uni.showToast({
            title: res.message || '分享失败',
            icon: 'none'
          });
        }
      } catch (err) {
        console.error('分享失败:', err);
        uni.showToast({
          title: '分享失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 提取景点信息
    extractAttractions() {
      const attractions = [];
      const knownKeywords = ['酒店', '宾馆', '旅馆', '机场', '火车站', '汽车站', '返回', '在...附近', '所在城', '晚餐', '午餐', '早餐', '回程', '自由活动'];
      
      if (!this.planData.travelPlan) return attractions;
      
      // 按行分割行程内容
      const lines = this.planData.travelPlan.split('\n');
      
      lines.forEach(line => {
        // 清理行内容
        let cleanLine = line.replace(/^\d{1,2}[:：]\d{2}[^，。；]*[：:]/g, '').trim();
        
        // 匹配景点名称
        const placeMatches = cleanLine.match(/([^\s，。；！？,;!?]{2,}(?:景区|景点|公园|广场|古镇|博物馆|寺庙|塔|故居|纪念馆|花园|城堡|宫|园|院|街|城|门))/g);
        
        if (placeMatches) {
          placeMatches.forEach(place => {
            const trimmedPlace = place.trim();
            if (trimmedPlace && trimmedPlace.length >= 3 && trimmedPlace.length < 15 && 
                !knownKeywords.some(keyword => trimmedPlace.includes(keyword))) {
              if (!attractions.some(a => a.name === trimmedPlace)) {
                attractions.push({
                  name: trimmedPlace,
                  description: cleanLine
                });
              }
            }
          });
        }
      });
      
      return attractions;
    },
    
    // 获取行程天数
    getDayCount() {
      if (!this.planData.startDate || !this.planData.endDate) return 0;
      
      const start = new Date(this.planData.startDate);
      const end = new Date(this.planData.endDate);
      const diffTime = Math.abs(end - start);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      return diffDays + 1;
    }
  }
}
</script>

<style lang="scss">
.planning-container {
  padding: 4%;
  padding-bottom: calc(4% + 120rpx);
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
  
  .planning-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4%;
    padding: 4%;
    background-color: #fff;
    border-radius: calc(32rpx * 0.8);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    
    .title {
      font-size: calc(40rpx * 0.9);
      font-weight: bold;
      color: #333;
      flex: 1;
      margin-right: 20rpx;
      word-break: break-all;
    }
    
    .actions {
      display: flex;
      gap: 3%;
      flex-shrink: 0;
      
      .btn {
        display: flex;
        align-items: center;
        padding: calc(16rpx * 0.9) calc(32rpx * 0.9);
        font-size: calc(28rpx * 0.9);
        border-radius: calc(40rpx * 0.8);
        border: none;
        transition: all 0.3s ease;
        white-space: nowrap;
        
        .icon {
          margin-right: 8rpx;
          font-size: calc(32rpx * 0.9);
        }
        
        &:active {
          transform: scale(0.96);
        }
      }
      
      .edit-btn {
        background-color: #4CAF50;
        color: #fff;
      }
      
      .delete-btn {
        background-color: #f44336;
        color: #fff;
      }
    }
  }
  
  .planning-content {
    .loading, .error-message {
      padding: 8%;
      margin: 4% 0;
      background-color: #fff;
      border-radius: calc(32rpx * 0.8);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    }
    
    .error-message {
      .error-icon {
        font-size: 80rpx;
        margin-bottom: 20rpx;
      }
      
      .error-text {
        font-size: 28rpx;
        color: #f44336;
        margin-bottom: 30rpx;
      }
      
      .retry-btn {
        padding: 16rpx 40rpx;
        font-size: 28rpx;
        background-color: #f44336;
        color: #fff;
        border-radius: 40rpx;
        border: none;
      }
    }
    
    .edit-form {
      background-color: #fff;
      padding: 5%;
      border-radius: calc(32rpx * 0.8);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      
      .form-item {
        margin-bottom: 5%;
        
        .label {
          display: block;
          font-size: calc(32rpx * 0.9);
          margin-bottom: 2%;
        }
        
        .input, .textarea {
          width: 100%;
          box-sizing: border-box;
          border: 2rpx solid #e0e0e0;
          border-radius: calc(24rpx * 0.8);
          padding: 3%;
          font-size: calc(28rpx * 0.9);
        }
        
        .textarea {
          min-height: 40vh;
        }
      }
      
      .form-actions {
        display: flex;
        justify-content: center;
        gap: 5%;
        margin-top: 8%;
        
        .btn {
          flex: 1;
          max-width: 40%;
          padding: 3% 6%;
          font-size: calc(32rpx * 0.9);
        }
      }
    }
    
    .plan-details {
      .section {
        background-color: #fff;
        padding: 5%;
        border-radius: calc(32rpx * 0.8);
        margin-bottom: 4%;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
        
        .section-header {
          margin-bottom: 4%;
          padding-bottom: 3%;
          
          .section-title {
            font-size: calc(36rpx * 0.9);
          }
          
          .section-subtitle {
            font-size: calc(26rpx * 0.9);
          }
        }
        
        .plan-content {
          font-size: calc(28rpx * 0.9);
          line-height: 1.8;
          word-break: break-all;
        }
        
        .info-list {
          .info-item {
            padding: 3% 0;
            
            .label, .value {
              font-size: calc(28rpx * 0.9);
            }
          }
        }
      }
    }
  }
}

.action-section {
  display: flex;
  gap: 4%;
  margin-top: 5%;
  margin-bottom: 5%;
  padding: 0 4%;
  
  .action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88rpx;
    padding: 20rpx 32rpx;
    border-radius: calc(32rpx * 0.8);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    
    &:active {
      transform: scale(0.96);
    }
    
    .icon {
      font-size: calc(36rpx * 0.9);
      margin-right: 12rpx;
    }
    
    .text {
      font-size: calc(32rpx * 0.9);
      font-weight: 500;
    }
    
    &.generate-map-btn {
      background-color: #4CAF50;
      color: #fff;
      box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
    }
    
    &.share-btn {
      background-color: #2196F3;
      color: #fff;
      box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
    }
  }
}

@media screen and (max-width: 375px) {
  .planning-container {
    padding: 3%;
    padding-bottom: calc(3% + 100rpx);
    
    .planning-header {
      padding: 3%;
      
      .title {
        font-size: calc(36rpx * 0.9);
      }
      
      .actions .btn {
        padding: calc(12rpx * 0.9) calc(24rpx * 0.9);
        font-size: calc(24rpx * 0.9);
      }
    }
    
    .planning-content {
      .form-item .label {
        font-size: calc(28rpx * 0.9);
      }
      
      .plan-content, .info-item .label, .info-item .value {
        font-size: calc(26rpx * 0.9);
      }
    }
    
    .action-section {
      padding: 0 3%;
      margin-bottom: 4%;
      
      .action-btn {
        min-height: 80rpx;
        padding: 16rpx 24rpx;
        
        .icon {
          font-size: calc(32rpx * 0.9);
        }
        
        .text {
          font-size: calc(28rpx * 0.9);
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .planning-container {
    padding: 5%;
    padding-bottom: calc(5% + 140rpx);
    max-width: 1200rpx;
    margin: 0 auto;
    
    .planning-header {
      padding: 5%;
      
      .title {
        font-size: calc(44rpx * 0.9);
      }
    }
    
    .planning-content {
      .section {
        padding: 6%;
      }
      
      .form-item .textarea {
        min-height: 50vh;
      }
    }
    
    .action-section {
      padding: 0 5%;
      margin-bottom: 6%;
      
      .action-btn {
        min-height: 96rpx;
        padding: 24rpx 40rpx;
        
        .icon {
          font-size: calc(40rpx * 0.9);
        }
        
        .text {
          font-size: calc(36rpx * 0.9);
        }
      }
    }
  }
}
</style> 